<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>复制小案例</title>
	</head>
	<body>
		<!-- 【 案例一 】 -->

		<div>选中复制</div>
		<input type="text" id="input" />

		<script>
			// * event.clipboardData 是一个只读对象，仅在 copy、cut 和 paste 事件的事件处理函数中可用。

			document.addEventListener('copy', async (event) => {
				// 选中的文本内容
				const selectedText = document.getSelection().toString()

				// * 设置剪贴板的内容
				event.clipboardData.setData('text/plain', selectedText + ' + 自定义的剪贴板内容')

				event.preventDefault() // 阻止拷贝（阻止后浏览器不会自动将选中的内容复制到剪贴板）
			})

			input.addEventListener('paste', (event) => {
				// * 获取剪贴板的内容
				const pastedText = event.clipboardData.getData('text/plain')

				input.value = pastedText
			})
		</script>

		<hr />
		<hr />
		<hr />

		<!-- 【 案例二 】 -->
		<div style="cursor: pointer" id="copy">点击复制</div>
		<input type="text" id="input2" />

		<script>
			// * navigator.clipboard 是一个异步 API，允许你读取和写入剪贴板的内容。它是通过 navigator 对象提供的，任何时候都可以访问。

			const copy = document.getElementById('copy')

			copy.addEventListener('click', async (event) => {
				// * 新 api 异步设置剪切板内容
				await navigator.clipboard.writeText(event.target.textContent + ' + 自定义的剪贴板内容')
			})

			input2.addEventListener('paste', async (event) => {
				// * 新 api 异步获取剪贴板的内容
				const pastedText = await navigator.clipboard.readText()
				input2.value = pastedText
			})
		</script>
	</body>
</html>
